<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addAttrValue">添加属性</el-button>
    <el-table :data="attrList" border v-loading="loading">
      <el-table-column type="index" label="序号" align="center" width="80"> </el-table-column>
      <el-table-column prop="attrName" label="属性名称" width="180"> </el-table-column>
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" style="margin-right: 5px">{{ attrValue.valueName }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip content="编辑属性" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="small" @click="editAttrValue(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？" @onConfirm="deleAttrValue(row, $index)">
            <el-tooltip slot="reference" content="删除属性" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetAttrList, reqDeleteAttrInfo } from '@/api/product/attr'
export default {
  name: 'AttrList',
  data() {
    return {
      loading: false,
      attrList: []
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  watch: {
    category3Id: {
      immediate: true,
      handler() {
        this.getAttrList()
      }
    }
  },
  methods: {
    //封装获取当前的属性列表
    async getAttrList() {
      const { category1Id, category2Id, category3Id } = this
      if (!category3Id) {
        this.attrList = []
        return //不要让代码向下执行
      }
      this.loading = true
      const result = await reqGetAttrList({ category1Id, category2Id, category3Id })
      if (result.code === 200) {
        this.attrList = result.data
        this.loading = false
      }
    },
    async deleAttrValue(row, index) {
      const result = await reqDeleteAttrInfo(row.id)
      if (result.code === 200) {
        // this.getAttrList()
        this.attrList.splice(index, 1)
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
    },
    //给父组件传递数据
    editAttrValue(row) {
      this.$emit('setAttr', row)
      this.$emit('setIsShowList', false)
    },
    //添加时清空数据
    addAttrValue() {
      this.$emit('setAttr', {
        attrName: '',
        attrValueList: []
      })
      this.$emit('setIsShowList', false)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>